<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f1">
                <feFlood flood-color="#0f0" flood-opacity="1" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="over"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="30" fill="#f00" filter="url(#f1)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f2">
                <feFlood flood-color="#0f0" flood-opacity="1" result="p1"/>
                <feComposite in="p1" in2="SourceGraphic"
                    operator="out"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="30" fill="#f00" filter="url(#f2)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f3">
                <feFlood  flood-color="#0f0" flood-opacity="1"/>
                <feOffset  dx="10" dy="0" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="atop"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="30" fill="#f00" filter="url(#f3)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f4">
                <feFlood  flood-color="#0f0" flood-opacity="1" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="xor"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="30" fill="#f00" filter="url(#f4)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f5">
                <feFlood  flood-color="#0f0" flood-opacity="1" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="arithmetic" k1="0" k2=".5" k3=".5" k4="0"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="30" fill="#f00" filter="url(#f5)" />
    </svg>

    <hr>
    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f6">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="over"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f6)" fill-opacity=".8"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f7">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="in"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f7)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f8">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="out"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f8)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f9">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="atop"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f9)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f10">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="xor"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f10)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f11">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="lighter"/>
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f11)"  />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">

        <defs>
            <filter id="f12">
                <feImage href="../imgs/7.png" height="80" width="80" result="p1"/>
                <feComposite in="SourceGraphic" in2="p1"
                    operator="arithmetic"  k3="1" k4=".5" />
            </filter>
        </defs>

        <circle cx="50" cy="50" r="40" fill="#f00" filter="url(#f12)"  />
    </svg>


    <script src="index.js"></script>
</body>
</html>